<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图文混排</title>
    <link rel="stylesheet" href="../css/bootstrap4.5.min.css">
    <link rel="stylesheet" href="../css/public.css">
    <link rel="stylesheet" href="../css/swiper-bundle.min.css">
    <script src="../js/jquery-3.5.1.min.js"></script>
    <script src="../js/bootstrap4.5.min.js"></script>
    <script src="../js/swiper-bundle.min.js"></script>
</head>
<style>
    /*https://fkwylsj10.jz.fkw.com/?previewDemo=true   关于我们   Strategy*/
    .imgText_mix_title {
        text-align: center;
    }

    .imgText_mix_title h2 {
        color: var(--c_theme);
        font-size: var(--f_title);
        line-height: var(--l_title);
    }

    .imgText_mix_title p {
        margin: 22px 0 0 0;
        color: var(--c_text);
        font-size: var(--f_text);
        line-height: var(--l_text);
    }
    .imgText_mix_list{
        margin: 60px auto 0;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
    }
    .imgText_mix_list_left{
        width: 50%;
        height: 454px;
    }
    .imgText_mix_list_left img{
        width: 100%;
        height: 100%;
       
    }
    .imgText_mix_list_right{
        margin-left: 40px;
        width: 50%;
    }
    .imgText_mix_right_text{
        margin: 40px 0 0 0;
    }
    .imgText_mix_right_text p:nth-child(1){
        color: var(--c_text);
        font-size: var(--f_text);
        line-height: var(--l_text);
    }
    .imgText_mix_right_text p:nth-child(2){
        margin: 40px 0   ;
        color: var(--c_text);
        font-size: var(--f_notes);
        line-height: var(--l_notes);
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .imgText_mix_right_swiper .swiper-container{
        width: 100%;
        height: 260px;
    }
    .imgText_mix_right_swiper .swiper-container img{
        width: 100%;
        height: 100%;
    }


@media(max-width:1200px){

    .imgText_mix_title p {
        margin: 10px 0 0 0;
    }
    .imgText_mix_list{
        margin: 30px auto 0;
    }
    .imgText_mix_list_left{
        display: none;
    }
    .imgText_mix_list_right{
        margin-left: 0;
        width: 100%;
    }
    .imgText_mix_right_text{
        margin: 0 0 0 0;
    }
    .imgText_mix_right_text p:nth-child(2){
        margin: 20px 0 ;
    }
    .imgText_mix_right_swiper .swiper-container{
        width: 100%;
        height: 300px;
    }
}
@media(max-width:768px){
.imgText_mix_right_swiper .swiper-container{
    width: 100%;
    height: 250px;
}
}
</style>

<body>
    <div class="imgText_mix modular">
        <div class="imgText_mix_title">
            <h2>Strategy</h2>
            <p>品牌发展战略</p>
        </div>
        <div class="imgText_mix_list public_width">
            <div class="imgText_mix_list_left">
                <img src="../images/case_list_2_1.jpg" alt="">
            </div>
            <div class="imgText_mix_list_right">
                <div class="imgText_mix_right_text">
                    <p>Strategy</p>
                    <p>秉承大客户战略，系统定制生态居住环境，推广绿色建筑、生态环保理念；通过品牌输出等活动，向业界宣传公司的新科研成果和应用案例，
                        向社会各界推广绿色环保的生活方式，全方位扩大公司品牌的知名度和影响力
                        秉承大客户战略，系统定制生态居住环境，推广绿色建筑、生态环保理念；通过品牌输出等活动，向业界宣传公司的新科研成果和应用案例，
                        向社会各界推广绿色环保的生活方式，全方位扩大公司品牌的知名度和影响力
                        秉承大客户战略，系统定制生态居住环境，推广绿色建筑、生态环保理念；通过品牌输出等活动，向业界宣传公司的新科研成果和应用案例，
                        向社会各界推广绿色环保的生活方式，全方位扩大公司品牌的知名度和影响力
                        秉承大客户战略，系统定制生态居住环境，推广绿色建筑、生态环保理念；通过品牌输出等活动，向业界宣传公司的新科研成果和应用案例，
                        向社会各界推广绿色环保的生活方式，全方位扩大公司品牌的知名度和影响力
                        秉承大客户战略，系统定制生态居住环境，推广绿色建筑、生态环保理念；通过品牌输出等活动，向业界宣传公司的新科研成果和应用案例，
                        向社会各界推广绿色环保的生活方式，全方位扩大公司品牌的知名度和影响力</p>
                        

                </div>
                <div class="imgText_mix_right_swiper">
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <img src="../images/case_list_2_1.jpg" alt="">
                            </div>
                            <div class="swiper-slide"> <img src="../images/case_list_2_1.jpg" alt=""></div>
                            <div class="swiper-slide"> <img src="../images/case_list_2_1.jpg" alt=""></div>
                        </div>
                        <!-- 如果需要分页器 -->
                        <div class="swiper-pagination"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>        
        var mySwiper = new Swiper ('.swiper-container', {
          loop: true, // 循环模式选项
          // 如果需要分页器
          pagination: {
            el: '.swiper-pagination',
          },
        })        
        </script>


</body>

</html>